<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>cXz播放器</title>
    <!-- Styles -->
    <link href="css/cxzplayer.css" rel="stylesheet">
    <script src="./js/netdisk.js"></script>
  </head>
  <body>
    <!-- 标题栏 -->
    <div class="header">
      <div class="titleBar">
        <span class="titleHeader"><label>cXz播放器</label></span>
      </div>
    </div>
    
    <!-- 窗口中部 -->
    <div class="center">
      <!-- 左侧边栏 -->
      <div class="sidebar">
        <!-- 播放列表 -->
        <!--
          <div class="playlist">
          <a class="playlist-header">播放列表</a>
          <div class="divide"></div>
          <ul class="playlist-items">
            <li><a href="#" class="playlist-item">填充用歌曲</a></li>
            
          </ul> 
        </div>
        -->
        
        <!-- 网盘歌曲列表 -->
        <div class="netdisklist">
          <a class="playlist-header">网盘列表</a>
          <div class="divide"></div>
          <ul class="playlist-items" id="netdisk-list">
            
          </ul> 
        </div>
      </div>
      <!-- 主内容框 -->
      <div class="main-container">
      
      </div>
    </div>
    <div class="bobar">
      <div class="bobar-header">
        <span class="bobar-cover"><img src=""></span>
        <span class="bobar-info">
          <label class="nfo" id="musicname">选择音乐开始播放</label>
          <!--<label class="nfo" id="musictime">剩余时间</label>-->
        </span>
      </div>
      
      <div class="bobar-right">
        <span class="bobar-item" id="bobar-item-last">上一首</span>
        <span class="bobar-item" id="bobar-item-play">播放</span>
        <span class="bobar-item" id="bobar-item-next">下一首</span>
      </div>
    </div>
  </body>

  <script>
    var serveraddr = 'http://45.77.14.201:2000/';
    var au = document.createElement('audio');
    var button = document.getElementById('bobar-item-play');
    var musictitle = document.getElementById('musicname');
    var playStatus = 'stopped';
    function playMusic(url){
        au.src = serveraddr+url;
      
      au.play();
      playStatus = 'playing';
      musictitle.innerText = url;
      button.innerText = '暂停';
      console.log('playing');
    }
    function GetMuList(){
      var json = {};
      var httpReq = new XMLHttpRequest();
      httpReq.open('GET',serveraddr+'getlist',true);
      httpReq.send();
      httpReq.onreadystatechange = function(){
        if(httpReq.readyState == 4 && httpReq.status == 200){
          var musics = JSON.parse(httpReq.responseText)
          musics.forEach(function(val,index){
            document.getElementById("netdisk-list").innerHTML += '<li onclick="playMusic(\''+val.url+'\')"><a href="#" class="playlist-item">'+val.name+'</a></li>';
          })
        }
      }
      
    } 
    
    GetMuList();
    


    
    
    document.getElementById('bobar-item-play').onclick = function(){
      console.log('Play button clicked.');
      switch(playStatus){
        case 'playing':
          au.pause();
          playStatus = 'paused';
          button.innerText = '播放';
          console.log('paused');
          
          break;
        case 'paused':
          au.play();
          playStatus = 'playing';
          button.innerText = '暂停';
          console.log('resumed')
          break;
      }
    }
  </script>
</html>